import React,{use, useEffect,useState} from "react";
import { Button,
  Form,
  Input,
  Table,
  Modal,
  Select,
  DatePicker,
  InputNumber,
  Popconfirm} from 'antd'
import './user.css'
import {getUser,addUser,editUser,delUser} from '../../api/index'
import dayjs from 'dayjs'

const  User =() => {
    const [listData, setListData] = useState({
    name: ""
  })   // 用户列表数据
    const [tableData,setTableData] = useState([])    // 表格数据
    // 0新增 1 编辑
    const [modalType,setModalType] = useState(0)   // 新增或编辑
    const [isModalOpen,setIsModalOpen] =useState(false)    // 弹窗状态
    const [form] = Form.useForm();   // 表单
    // 新增/编辑
   const handleClick=(type,rowData) => {
    setIsModalOpen(true)
      if (type === 'add') {
        setModalType(0)
      } else {
        setModalType(1)
        const cloneData = JSON.parse(JSON.stringify(rowData))
        // 将原始日期数据转换为 dayjs 对象
        cloneData.birth = dayjs(rowData.birth)
        form.setFieldsValue(cloneData)
      }
    }
    // 提交。名字搜索
   const handleFinish =(e) => {
    setListData({
        name: e.keyword,
    })
    }
    // 时刻监听搜索条件变化：这个地方保证了搜索名字之后立即更新列表
    useEffect(() => {
      getTableData()
    },[listData])

    // 删除
    const handleDelete = ({id}) => {
        // console.log('删除')
        delUser({id}).then(()=> {
          getTableData()
    })
    }
    // 获取/更新   表格数据
    const getTableData=() => {
        getUser(listData).then(({data}) => {
            console.log(data.list,'res')
            setTableData(data.list)
        })
    }
    // 弹窗确定事件
    const handleOk =()=> {
      // 表单验证，validateFields是Ant的Form组件提供的一个方法，用于验证表单字段
      form.validateFields().then((val) => {
        // console.log(val)
        //  // val 是验证通过的表单字段值的对象
        val.birth = dayjs(val.birth).format('YYYY-MM-DD')
        // 调接口 需要根据状态判断是新增还是编辑
       if (modalType) { // 编辑
        editUser(val).then(() => {
          // 关闭弹窗
          handleCancel()
          getTableData()
        })
      } else { // 新增
        addUser(val).then(() => {
          // 关闭弹窗
          handleCancel()
          getTableData()
        })
      }
      })
    }
    // 弹窗取消事件
    const handleCancel =()=> {setIsModalOpen(false) 
      // 重置表单
      form.resetFields()}
        
     const columns = [
       {
         title: '姓名',
         dataIndex: 'name'
       },
       {
         title: '年龄',
         dataIndex: 'age'
       },
       {
         title: '性别',
         dataIndex: 'sex',
         render: (val) => {
           return val ? '女' : '男'
         }
       },
       {
         title: '出生日期',
         dataIndex: 'birth'
       },
       {
         title: '地址',
         dataIndex: 'addr'
       },
       {
         title: '操作',
         render: (rowData) => {
           return (
             <div className="flex-box">
               <Button style={{marginRight: '5px'}} onClick={() => handleClick('edit', rowData)}>编辑</Button>
               <Popconfirm
                 title="提示"
                 description="此操作将删除该用户, 是否继续?"
                 okText="确认"
                 cancelText="取消"
                 onConfirm={() => handleDelete(rowData)}
               >
                 <Button type="primary" danger>删除</Button>
               </Popconfirm>
             </div>
           )
         }
       }
     ]

    useEffect(()=> {
        // 调用后端接口获取用户列表
        getTableData()
    },[])
    return (
        <div className="user">
         <div className="flex-box">
            <Button type="primary" onClick={() => handleClick('add')}>+新增</Button>
            <Form layout="inline" onFinish={handleFinish}>
               <Form.Item name="keyword">
                  <Input placeholder="请输入用户名" />
               </Form.Item>
               <Form.Item>
                <Button htmlType="submit" type="primary">搜索</Button>
               </Form.Item>
            </Form>
         </div>
         <Table style={{marginTop:'10px'}} columns={columns} dataSource={tableData} rowKey={'id'} />
         <Modal
            open={isModalOpen}
            title={modalType ? '编辑' :'新增'}
            onOk={handleOk}
            onCancel={handleCancel}
            onText="确定"
            cancelText="取消"
         >
            <Form  
            form={form}
            labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 18,
          }}
          labelAlign="left">
          { modalType == 1 &&
                      <Form.Item
                        name="id"
                        hidden
                      >
                        <Input/>
                      </Form.Item>
                    }
            <Form.Item
             label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入姓名',
              },
            ]}>
         <Input placeholder="请输入姓名" />
            </Form.Item>
 <Form.Item
            label="年龄"
            name="age"
            rules={[
              {
                type: 'number',
                message: '年龄必须是数字',
              },
              {
                required: true,
                message: '请输入年龄',
              },
            ]}
          >
            <InputNumber placeholder="请输入年龄" />
          </Form.Item>
          <Form.Item
            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: '性别是必选项',
              },
            ]}
          >
            <Select
              placeholder="请选择性别"
              options={[
                { value: 0, label: '男' },
                { value: 1, label: '女' }
              ]}
            ></Select>
          </Form.Item>
          <Form.Item
            label="出生日期"
            name="birth"
            rules={[
              {
                required: true,
                message: '请选择出生日期',
              },
            ]}
          >
            <DatePicker placeholder="请选择" format="YYYY/MM/DD" />
          </Form.Item>
          <Form.Item
            label="地址"
            name="addr"
            rules={[
              {
                required: true,
                message: '请填写地址',
              },
            ]}
          >
            <Input placeholder="请填写地址" />
          </Form.Item>
            </Form>
         </Modal>
        </div>
    )
}
export default  User;